<template>
  <div class="register-top">
    <span>注册</span>
  </div>
  <div class="register">
    <div class="register-input">
      <van-form @submit="onSubmit" @failed="onFailed">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field
            v-model="info.user"
            name="text"
            placeholder="请输入账号"
            :rules="[{ message: '账号格式不正确' }]"
          />
          <!-- 通过 validator 进行函数校验 -->
          <van-field
            v-model="info.pass"
            type="password"
            class="register-underline"
            name="password"
            placeholder="请输入密码"
            :rules="[{ validator, message: '密码格式不正确' }]"
          />
          <!-- 通过 validator 返回错误提示 -->
          <van-field
            v-model="info.repassword"
            type="password"
            name="repassword"
            placeholder="再次确认密码"
            :rules="[{ validator, message: '密码不一样' }]"
          />
          <!-- 通过 validator 进行异步函数校验 -->
          <van-field
            v-model="info.phone"
            name="telephoner"
            placeholder="请输入手机号"
            :rules="[{ message: '请输入正确内容' }]"
          />
        </van-cell-group>

        <div style="margin: 16px;">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            class="register-button"
            @click="register"
          >
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { closeToast, showLoadingToast } from 'vant'
import { useRouter } from 'vue-router'

const route = useRouter()
const info = reactive({
  user: '',
  pass: '',
  phone: '',
  repassword: '',
})

const register = () => {
  route.push('/login')
  console.log('注册')
}
// const log = () => {
//   console.log('注册')
//   if (info.phone !== info.pass) {
//     const a = 1
//   } else {
//     const a = 0
//   }
// }

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val:any) => /\d{6,10}/.test(val)

// 校验函数可以直接返回一段错误提示

const onSubmit = (values: any) => {
  console.log('submit', values.text, values.password, values.repassword, values.telephoner)
  localStorage.setItem('', values)
}
const onFailed = (errorInfo: any) => {
  console.log('failed', errorInfo)
}

</script>

      <style lang="less" scoped>
      html,body{
        width: 100%;
        height: 100%;
      }
      .register{
        height: 100%;
      background: #ffffff;
      overflow: hidden;
      }

      .register-top{
        width: 100%;
        height: 200px;
        background: url(../../assets/cjx/c2.jpg)no-repeat;
        text-align: center;
        background-size: 100%;
      }
      span{
        display: block;
        width: 100%;
        height: 10px;
        font-weight: 500;
        font-size: 16px;

      }

      .register-input{
        margin-top: 20px;
      }

      .register-button{
        background: #f5ca2b;
        border: 0;
        color: black;
        margin-top: 30px;
        margin-bottom: 60px;
      }

      .register-underline{
      border-bottom: 1px solid #f8f8f8;
      }

      </style>
